<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 16:07:19
 * @FilePath     : \vue3.2.31-case\响应式基础\响应式工具函数\toRef\App.vue
-->
<script setup lang="ts">
import { reactive, toRef } from 'vue'

// 引用数据类型
let obj = { name: "syl", age: "123" };
let stateToref = toRef(obj, "name"); // 将name拿出来

// let otherToref = toRef(obj, 'other')   //ts中午无法toRef一个对象没有的属性，js可以，相当于往对象新增一个属性other，且是响应式的
console.log(stateToref.value) //syl

stateToref.value = "zs";
console.log("obj", obj.name);   // zs
console.log("ref", stateToref.value); // zs

obj.name = "ls";
console.log("obj", obj.name); // ls
console.log("ref", stateToref.value); // ls

console.log('===========')

//reactive数据类型
let obj1 = reactive({name: "syl", age: '123'})
let stateToref1 = toRef(obj1, 'name')  //将name拿出来

console.log(stateToref1.value)  //syl

stateToref1.value = 'zs'
console.log("obj", obj1.name);   //zs
console.log("ref", stateToref1.value); //zs

obj1.name = "ls";
console.log("obj", obj1.name); //ls
console.log("ref", stateToref1.value); //ls

</script>

<template>
  <h3>toRef</h3>
  <h5>
    作用：单个转换。将引用数据类型中某个属性转换为ref数据类型，将reavtive数据类型中某个属性转换转换为ref数据类型
  </h5>
  <h5>
    参数：<br>
    1、第一个参数：引用数据或reactive类型的数据的源对象
    2、第二个参数：源对象中的属性名
  </h5>
  <h5>
    使用场景：<br>
    1、有一个引用类型数据或响应式对象数据，但是模板中只需要使用其中一项数据；
  </h5>
  <h5>
    toRef和ref的区别：<br>
    1、ref 是对传入数据的拷贝，ref 的值改变会更新视图；toRef 是对传入数据的引用，toRef 的值改变不会更新视图
  </h5>
  <h5>
    注意：<br>
    1、引用数据，是址传递，源数据发生改变，toRef后的也会发生改变 <br>
    2、toRef后的数据在事件触发中发生改变，数据会变化，但界面不会自动更新 <br>
    3、toRef后的数据没在事件触发中发生改变，数据会变化，界面会自动更新 <br>
    4、ref更新导致toRef的视图也自动更新 <br>
  </h5>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
